<script setup>
import { ref } from 'vue'

defineProps({
  list: {
    type: Object,
    default: []
  },
  cardIndex: Number,
  isEmpty: Boolean
})
const emit = defineEmits(['preview'])

// 点击查看详情
const onPreview = (index) => {
  emit('preview', index)
}

// 留言卡片容器的宽度
const width = ref(0)
const setWidth = () => {
  const wWidth = document.body.clientWidth
  // 留言墙宽度=(屏幕可视区域宽度-左右边距(共120)) / 单个卡片的宽度 * 单个卡片的宽度
  width.value = Math.floor((wWidth - 120) / 300) * 300
}
setWidth()
</script>

<template>
  <div class="leaveword-wall" :style="{ width: width + 'px' }">
    <!-- 留言卡片 -->
    <zy-card
      class="item"
      :class="{ active: cardIndex === index }"
      v-for="(item, index) in list"
      :key="item.id"
      :card="item"
      isEllipsis
      @click="onPreview(index)"
    />
    <!-- 空状态 -->
    <div class="empty" v-if="isEmpty">
      <img src="@/assets/images/add-leaveword.svg" />
      <p>还没有留言，快贴上第一张吧！</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.leaveword-wall {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  min-height: 252px;
  .item {
    width: 288px;
    margin: 6px;
    border: 1px solid transparent;
    &:hover {
      transform: translateY(-6px);
    }
  }
  .active {
    border-color: var(--primary-color);
  }
}

.empty {
  margin: 50px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
  }
  p {
    font-weight: 700;
    font-size: 16px;
    color: var(--gray-text-2);
  }
}
</style>
